3.3 How to display

  1. Motivations
    • We have discussed most basic/important topics in HTML. E.g., elements, attributes, and CSS properties.
    • How to change the positions of elements?
    • How to group multiple elements?
    • How to change the presentation or style of elements? E.g., text size, color, visibility, border, background, ...
    • Now it is about the time to discuss the five fundamental concepts in HTML and CSS. They are display types, grouping, the box model, positioning, and overlapping.

  2. Display type - Is there any rule to display HTML elements?
    • Do you remember that some elements are displayed in the next lines and some other elements are displayed in the same line? Can you list them separately?
    • There are two types of elements - inline and block. This is VERY important. Read all in HTML Block and Inline Elements, and try all the examples.
      • How to group elements so that the group is displayed as a block element?
      • How to group elements so that the group is displayed as an inline element if possible?
      • Trial 1. Let's try headings, <p>, <a>, <img> with 'html5.png', <b>, <pre>, <code>, <span>, <div> to find which ones are of inline/block. Which elements are of block type?


      • Which ones are inline elements? Which ones are block elements?
    • In the previous sections, you learned that each element can include some style information using attributes, with especially the style attribute. In the example of table, there was a question how to put the same padding for all the cells. How?
    • There is a better way to style elements. Read all in HTML Styles - CSS.
      • What does CSS stand for?
      • List the 3 ways to add styles. Which one have we used in the previous section? How do you use them?
      • Which element is used to include external style sheets?
      • How are attributes and properties different?
      • Give the syntax of internal styling.
        <style>
            selection {  /* Selection could be an element, class, id, element with id, ... */
                property: value; /* comments; not  */
                ...
            }
        </style>
        
      • Give an example how to change styles of all the <td> elements.
        <style>
            td {
                text-align:center;
                color:blue;
            }
        </style>
        
      • List all the CSS properties you have studied so far.
      • For what do you use the class and id attributes? Give examples.
      • Give the three ways to select an element or elements to apply styles.
        • element_name
        • .class_name
        • #element_id
      • We will discuss CSS3 and the box model later again in more detail. But let's remember that every visible HTML element has a box around it and has the width and height CSS properties accordingly.
      • Trial 2. Let's try to use Blue color text for all the elements in the class 'test', with internal CSS. Let's try to use Green background color for the element of id 'target.'


  3. Grouping
    • Why do you need to group elements?
    • span - a container that is displayed as an inline element
    • div - a container that is displayed as a block element
    • Trial 3. Let's try to make a block group containing <a>, <img> ('html5.png'), <b>.


    • Trial 4. Let's try to make an inline group containing <a>, <img> ('html5.png'), <b>.


    • Can you see the difference in the background dimensions in the above two examples?
  4. Displaying - How to change the display type
    • CSS display property is used to change the display type. There are mutiple display types, not only two.
      • block
      • inline
      • inline-block
      • none
      • ...
    • Here is an example.
      <div style='border: 2px blue solid'>
          <span>
              n July 14th, President Shaver - along with the three TRU Vice Presidents - announced an "Open Governance" initiative, 
              one aspect of which was a commitment to host two annual Town Halls at which 
              the senior administrators would be available to discuss governance and 
              academic decision-making issues with all members of the TRU community.
              <div style='border: 2px yellow solid; width: 400px; display:inline-block'>
                  TRUFA has prepared a formal response to these initiatives, which you can read in full here:  
                  <p>TRUFA has prepared a formal response to these initiatives, which you can read in full here:</p>
              </div>
              I want to urge those faculty, who are able, to attend the first Town Hall meeting scheduled for Thursday, September 15th in the CAC Mountain Room.  
              Lunch will be served at 12 noon and the session runs from 12:30 to 2:00 pm.  
          <span>
      </div>
      
      n July 14th, President Shaver - along with the three TRU Vice Presidents - announced an "Open Governance" initiative, one aspect of which was a commitment to host two annual Town Halls at which the senior administrators would be available to discuss governance and academic decision-making issues with all members of the TRU community.
      TRUFA has prepared a formal response to these initiatives, which you can read in full here:

      TRUFA has prepared a formal response to these initiatives, which you can read in full here:

      I want to urge those faculty, who are able, to attend the first Town Hall meeting scheduled for Thursday, September 15th in the CAC Mountain Room. Lunch will be served at 12 noon and the session runs from 12:30 to 2:00 pm.
    • Trial 5. Let's try to change <span> to block type and test. You may change <p> to inline type as well.


    • Trial 6. Let's try to change the first <div> to 'none' type and test what will be displayed.


  5. Is there any good coding style?
    • Indentations and line spaces
      <head>
          <title>COMP 2680</title>
          <style>
              p {
                  color: LightBlue;
              }
          </style>
      </head>
      
      <body>
          <h1>COMP 2680</h1>
              
          <p>Web Design and Programming. Wow!
              Web Design and Programming. Wow!</p>
      </body>
      
    • Proper hierarchical structure is necessary.
      <p>This is a <strong>very wrong example.</p></strong> 
      <p>This is a <strong>good example</strong>.</p> 
      
    • Proper encapsulation of elements is necessary.
      <ul>
          <p><li>This is a very wrong example.</li></p>
          <li>You may include <p>"This is a proper example."</p> here.</li>
      </ul>    
      
  6. Lab 1.
    • The menu in the next program, lab1_bgp.html, is not displayed.
    • Find the HTML code for the menu, and fix it, so that the menu is displayed. You need to think why the menu is not displayed.
    • Let's download and complete the program, using Notepad++ You can run the program by double-clicking it.

  7. Learning outcomes
    • List the two types of elements.
    • List the three types to add styles.
    • List the ways to select elements for styling.
    • Use of the <div> element and the <span> element.